<template>
	<view class="zone">
		<Header title="神石宝库"></Header>
		<view class="main">
			<!-- 神石 -->
			<view class="home_right">
				<view class="home_nav" @click="$p.navto('/pages/index/xianyuBalance?id=2')">
					<image class="home_navimg" src="http://image.qxgm.site/tdz/img/public/mg-02.png" mode="widthFix">
					</image>
					<text class="home_num">{{dealWith(userinfo.shenshi)}}</text>
					<image class="home_more" src="http://image.qxgm.site/tdz/img/public/mg-04.png" mode="widthFix">
					</image>
				</view>
			</view>

			<image class="img1" src="http://image.qxgm.site/tdz/img/shenhsi/mg-02.png" mode="widthFix"></image>

			<view class="gbox">
				<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
				<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<view class="box">
					<view class="tantabs">
						<view :class="['tab',tanStat==item.type?'act':'']" v-for="(item,index) in tanlist" :key="index"
							@click="changeTan(item.type)">
							{{item.name}}
						</view>
					</view>

					<view class="tinfo">

						<view class="imgbox">
							<image class="tsju" @click="tsju" src="http://image.qxgm.site/tdz/img/tk/tsjl.png"
								mode="widthFix"></image>
							<image class="img1" src="http://image.qxgm.site/tdz/img/shenhsi/mg-01.png" mode="widthFix">
							</image>
							<view class="btsna">
								<view class="khg">
									<view class="tiit">
										{{shenshi}}神石/1次
									</view>
									<view class="tansuo" @click="tansuofun(1)">
										探索
									</view>
								</view>
								<view class="khg">
									<view class="tiit">
										{{shenshi2}}神石/10次
									</view>
									<view class="tansuo2" @click="tansuofun(2)">
										探索
									</view>
								</view>
							</view>

						</view>

						<view class="title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
							<text>探索有几率掉落以下物品</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
						</view>
						<view class="kpop" v-if="tanStat == 1">
							<view class="kpart">
								<view class="img">
									<image class="tanimg" style="padding: 10px;box-sizing: border-box;"
										src="http://image.qxgm.site/tdz/img/active/3.png" mode="widthFix">
									</image>
								</view>
								<text>零钱*({{this.num_min1}}-{{this.num_max1}})</text>
							</view>
						</view>
						<view class="kpop" v-if="tanStat == 2">
							<view class="kpart">
								<view class="img">
									<image class="tanimg" style="padding: 9px 0px;"
										src="http://image.qxgm.site/tdz/img/tk/mg-03.png" mode="widthFix">
									</image>
								</view>
								<text>灵石*({{this.num_min2}}-{{this.num_max2}})</text>
							</view>
						</view>
						<scroll-view scroll-x class="kpop" v-if="tanStat == 3 || tanStat == 4">
							<view class="kpart" v-for="(item,index) in list[tanStat - 1]" :key="index">
								<view class="img">
									<image :src="item.img" mode="widthFix"></image>
								</view>
								<text>{{item.name}}</text>
							</view>
							<view class="empty" style="width: 77%;padding: 0vh 10px 10px;margin:auto;"
								v-if="list.length==0">
								<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
								暂无数据
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>


		<!-- 探索确认 -->
		<u-mask :show="tansuo">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>探索确认</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop2">
							<view class="tp1">您确认要使用<text class="t1">{{sxianshi==1?shenshi:shenshi2}}神石</text><br>
							</view>
							<view class="tp2">
								探索{{tanStat == 1 ? '零钱' : tanStat == 2 ? '灵石' : tanStat == 3 ? '丹药' : '道侣'}}宝库吗？</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel" @click="againCofirm">确认探索</u-button>
					</view>
				</view>
				<image class="m_close" @click="tansuo = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>

		<!-- 恭喜获得 -->
		<u-mask :show="obtain" @click="obtain = false,liftlist = []">
			<view class="warp2" @tap.stop>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/youchai/mg-7.png" mode="widthFix"></image>
				<view class="mask_content2">
					<view class="m_info2">
						<scroll-view scroll-y="true" class="gundong">
							<view class="plist">
								<view class="parts" v-for="(item,index) in liftlist" :key="index"
									v-if="liftlist.length != 0">
									<view class="sbimg">
										<image class="tanimg" :src="item.img" mode="widthFix">
										</image>
									</view>
									<view class="toan">
										{{item.name}}x<text v-if="item.number">{{item.number}}</text><text v-else>1</text>
									</view>
								</view>
								<view class="parts" v-if="liftlist.length == 0">
									<view class="sbimg">
										<image class="tanimg"
											:src="coin.name == 'money' ? 'http://image.qxgm.site/tdz/img/active/3.png' : 'http://image.qxgm.site/tdz/img/tk/mg-03.png'"
											mode="widthFix">
										</image>
									</view>
									<view class="toan">
										{{coin.name == 'money' ? '零钱' : '灵石'}}*{{coin.coin_num}}
									</view>
								</view>

							</view>
						</scroll-view>

						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="refineCon2" @click="obtain=false">确定</u-button>
					</view>
				</view>
				<image class="mask3" src="http://image.qxgm.site/tdz/img/youchai/mg-9.png" mode="widthFix"></image>
				<view class="dianjireny" @click="obtain = false,liftlist = []">
					点击任意位置退出
				</view>
			</view>
		</u-mask>


		<!-- 探索记录 -->
		<u-mask :show="friend">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>探索记录</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<scroll-view scroll-y class="scrollbox" @scrolltolower="scnextrecord">
							<block v-for="(item,index) in openlog" :key="index">
								<view class="item" v-for="(item1,index1) in item.props" :key="index1"
									v-if="item.props.length != 0">
									<view class="ybox">
										<view class="name">
											{{item.create_time}}
										</view>
										<view class="sind">
											{{item1.name}}
										</view>
									</view>
									<view class="libao">
										<image :src="item1.img" mode="widthFix"></image>
										<text>+1</text>
									</view>
								</view>
								<view class="item" v-if="item.props.length == 0">
									<view class="ybox">
										<view class="name">
											{{item.create_time}}
										</view>
										<view class="sind">
											{{item.coin.show_name}}
										</view>
									</view>
									<view class="libao">
										<!-- <image :src="item.img" mode="widthFix"></image> -->
										<text>+{{item.coin.coin_num}}</text>
									</view>
								</view>
							</block>

							<view class="empty" v-if="openlog.length==0">
								<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
								暂无数据
							</view>
							<view class="more" v-else>
								{{loadText}}
							</view>
						</scroll-view>
					</view>
				</view>
				<image class="m_close" @click="friend = false,openlog = [],page = 1"
					src="http://image.qxgm.site/tdz/img/public/cha.png" mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: uni.getStorageSync('userinfo'),
				tanlist: [{
						type: 1,
						name: '零钱',
						isrequest: true,
					},
					{
						type: 2,
						name: '灵石',
						isrequest: false,
					},
					{
						type: 3,
						name: '丹药',
						isrequest: false,
					},
					{
						type: 4,
						name: '道侣',
						isrequest: false,
					}
				],
				tanStat: 1,
				tansuo: false,
				obtain: false,
				coin: {},
				list: {
					0: [],
					1: [],
					2: [],
					3: []
				},
				liftlist: [],
				openlog: [],
				friend: false,
				shenshi: '',
				shenshi2: '',
				sxianshi: '',
				page: 1,
				max_page: '',
				loadText: '没有更多了',
				num_max1: '',
				num_min1: '',
				num_max2: '',
				num_min2: '',
			}
		},
		onShow() {},
		onLoad() {

			this.shenshilist(1)
		},
		methods: {
			// 获取个人信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.userinfo = res.data
				}
			},
			// 切换
			changeTan(type) {
				this.tanStat = type
				if (this.tanlist[this.tanStat - 1].isrequest == false) {
					this.tanlist[this.tanStat - 1].isrequest = true
					this.shenshilist(type)
				}
			},
			async shenshilist(type) {
				let res = await this.$http.index.shenshi({
					type: type
				})
				if (res.code == 1) {
					if (this.tanStat == 1) {
						this.num_max1 = res.data.num_max
						this.num_min1 = res.data.num_min
					} else if (this.tanStat == 2) {
						this.num_max2 = res.data.num_max
						this.num_min2 = res.data.num_min
					}

					this.list[this.tanStat - 1] = res.data.props
					this.shenshi = res.data.shenshi
					this.shenshi2 = res.data.shenshi * 10
				}
			},
			//探索
			async tansuofun(id) {
				if (id == 2) {
					this.sxianshi = 2
				} else {
					this.sxianshi = 1
				}
				this.tansuo = true
			},
			//确认探索
			async againCofirm() {
				// 一次开
				if (this.sxianshi == 1) {
					let res = await this.$http.index.ssopen({
						type: this.tanStat
					})

					if (res.code == 1) {
						this.tansuo = false
						this.obtain = true
						this.liftlist = res.data.props
						this.coin = res.data.coin
						this.getUserInfo()
					} else {
						this.$u.toast(res.msg)
					}
				} else {
					// 十次开
					let res = await this.$http.index.tenopenshenshi({
						type: this.tanStat
					})
					if (res.code == 1) {
						this.tansuo = false
						this.obtain = true
						this.liftlist = res.data.props
						this.coin = res.data.coin
						this.getUserInfo()
					} else {
						this.$u.toast(res.msg)
					}
				}

			},
			tsju() {
				this.ssopenlog()
			},
			//探索记录
			async ssopenlog() {
				let res = await this.$http.index.ssopenlog({
					page: this.page
				})
				if (res.code == 1) {
					this.openlog = [...this.openlog, ...res.data.data]
					this.friend = true
					this.max_page = res.data.last_page
					if (this.page > this.max_page || this.page == this.max_page) this.loadText = '没有更多了';
				}
			},
			scnextrecord() {
				if (this.page >= this.max_page) {
					this.loadText = '没有更多了'
					return;
				}
				this.loadText = '努力加载中';
				this.page = ++this.page;
				this.ssopenlog()
				setTimeout(() => {
					if (this.page > this.max_page || this.page == this.max_page) this.loadText = '没有更多了';
					else this.loadText = '努力加载中';
				}, 500)
			},
			dealWith(value) {
				value = Number(value)
				var num;
				if (value > 9999) { //大于9999显示x.xx万
					num = (Math.floor(value / 100) / 100) + '万';
				} else if (value <= 9999 && value > -9999) {
					num = value
				} else if (value < -9999) { //小于-9999显示-x.xx万
					num = -(Math.floor(Math.abs(value) / 1000) / 10) + '万'
				}
				return num;
			},
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% 100%;
	}

	.main {
		height: 100%;
		margin-top: -4px;
	}

	// #ifdef APP-PLUS
	.home_right {
		position: absolute;
		top: 47px;
		right: 18px;
		z-index: 999;
		width: 100px;

		.home_nav {
			position: relative;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: url(http://image.qxgm.site/tdz/img/public/btn1.png) no-repeat;
			background-size: 100% 100%;
			margin-bottom: 5px;
			padding: 2px 3px 2px 30px;
			box-sizing: border-box;
		}

		.home_navimg {
			position: absolute;
			width: 28px;
			top: 0px;
			left: -3px;
		}

		.home_num {
			font-size: 12px;
			font-weight: normal;
			color: #fff;
			text-align: center;
		}

		.home_more {
			width: 18px;
		}
	}

	// #endif

	// #ifdef H5
	.home_right {
		position: absolute;
		top: 17px;
		right: 18px;
		z-index: 999;
		width: 100px;

		.home_nav {
			position: relative;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: url(http://image.qxgm.site/tdz/img/public/btn1.png) no-repeat;
			background-size: 100% 100%;
			margin-bottom: 5px;
			padding: 2px 3px 2px 30px;
			box-sizing: border-box;
		}

		.home_navimg {
			position: absolute;
			width: 28px;
			top: 0px;
			left: -3px;
		}

		.home_num {
			font-size: 12px;
			font-weight: normal;
			color: #fff;
			text-align: center;
		}

		.home_more {
			width: 18px;
		}
	}

	// #endif



	.img1 {
		width: 100%;
	}

	.gbox {
		width: 100%;
	}

	.ping1 {
		width: 100%;
		display: flex;
	}

	.yun {
		position: absolute;
		top: -15%;
		left: 0;
		width: 44%;
		z-index: 9;
	}

	.box {
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 0px 0px 7px;
	}

	.tantabs {
		display: flex;
		align-items: center;

		margin-bottom: 6px;
		padding: 0 0px 0 5px;

		.tab {
			width: 16.6%;
			background: url(http://image.qxgm.site/tdz/img/daolv/smg-05.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			color: #FFFED0;
			line-height: 27px;
			box-sizing: border-box;
			margin-right: 10px;
		}

		.act {
			color: #A97D45;
			background: url(http://image.qxgm.site/tdz/img/daolv/smg-04.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.imgbox {
		position: relative;

		.tsju {
			position: absolute;
			z-index: 9;
			bottom: 30%;
			right: 6px;
			font-size: 16px;
			width: 50px;
		}

		.btsna {
			width: 100%;
			position: absolute;
			padding: 0 20%;
			bottom: 12px;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.khg {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.tiit {
			background: url(http://image.qxgm.site/tdz/img/yaoyuan/mg-08.png) no-repeat;
			background-size: 100% 100%;
			font-size: 13px;
			font-weight: normal;
			color: #FFFFFF;
			text-shadow: 0 1px 1px #000;
			padding: 2px 20px;
			text-align: center;
		}

		.tansuo {
			width: 106px;
			text-align: center;
			font-size: 16px;
			font-weight: normal;
			color: #faebbd;
			line-height: 37px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
			background-size: 100% 100%;
		}

		.tansuo2 {
			width: 106px;
			text-align: center;
			font-size: 16px;
			font-weight: normal;
			color: #fff;
			line-height: 37px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/lan.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.gundong {
		max-height: 226px;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-05.png) no-repeat;
		background-size: 100% 100%;

		image {
			width: 18%;
		}

		text {
			font-size: 15px;
			font-weight: normal;
			color: #50463E;
			line-height: 20px;
			margin: 0 13px;
		}
	}

	.kpop {
		white-space: nowrap;
		padding: 12px 10px 6px;
		background: url(http://image.qxgm.site/tdz/img/daolv/mg-01.png) no-repeat;
		background-size: 100% 100%;
		margin: 3px;
		box-sizing: border-box;

		.kpart {
			width: 20%;
			text-align: center;
			display: inline-block;
			margin-right: 10px;

			image {
				width: 100%;
				background: url(http://image.qxgm.site/tdz/img/equipment/mg-03.png) no-repeat;
				background-size: 100% 100%;
			}

			text {
				font-size: 12px;
				font-weight: normal;
				color: #333333;
				line-height: 12px;
				margin-top: 4px;
			}
		}
	}


	.jihuop2 {
		text-align: center;
		padding: 0 10%;

		.tp1 {
			font-size: 15px;
			font-weight: normal;
			color: #50433A;
			line-height: 15px;
			margin-top: 20px;
		}

		.tp2 {
			font-size: 18px;
			font-weight: normal;
			color: #50433A;
			line-height: 18px;
			margin-top: 10px;
		}

		.t1 {
			font-size: 18px;
			color: #ED519F;
		}
	}

	.getLevel {
		display: block;
		margin: 13px auto 0;
		width: 36%;
		font-size: 18px;
		font-weight: normal;
		color: #f9e5b6;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}


	.plist {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 14px;

		.parts {
			width: 25%;
			box-sizing: border-box;
		}

		.sbimg {
			display: block;
			margin: 0 auto;
			width: 53%;
			padding: 1% 3%;
			background: url(http://image.qxgm.site/tdz/img/liandan/mg-12.png) no-repeat;
			background-size: 100% 100%;
		}

		.tanimg {
			width: 100%;
		}

		.toan {
			font-size: 12px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-top: 12px;
			text-align: center;
		}

	}

	.refineCon2 {
		display: block;
		margin: 23px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}


	.scrollbox {
		height: 300px;
		overflow-y: scroll;
		padding: 0 30px;
		box-sizing: border-box;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
			background-size: 100% 100%;
			margin-bottom: 2px;
			padding: 10px 22px 10px 16px;
			box-sizing: border-box;
		}

		.name {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-bottom: 9px;
			white-space: nowrap;
			/*不允许换行*/
			overflow: hidden;
			/*超出隐藏*/
			text-overflow: ellipsis;
		}

		.ybox {
			flex: 1;
			margin-left: 4px;
			width: 0%;
		}

		.sind {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
		}

		.libao {
			display: flex;
			align-content: center;

			image {
				width: 32px;
			}

			text {
				font-size: 21px;
				color: #006600;
				font-weight: normal;
				line-height: 30px;
				margin-left: 4px;
			}
		}
	}
</style>